﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@section BeforeScripts{

}
@section Scripts{
    <script type="text/javascript">
        var dg = $('#dlg');
        var dlg = $('#dlog');

        $(function () {

        });
        InItDatagrid("/Role/GetSysRoles", "角色列表");

        function InItDatagrid(url, title) {
            var setRoleobj = null;
            dg.datagrid({
                url: url,
                headers: headers,
                title: title,
                columns: [[
                    { field: 'Id', title: '主键', width: 100 },
                    { field: 'RoleName', title: '角色名称', width: 100 },
                    { field: 'RoleCode', title: '角色编码', width: 100 },
                    {
                        field: 'operaer', title: '操作', width: 300, formatter: function (value, row, index) {
                            var str = '<input id="user_rel_' + row.Id + '"class="easyui-combobox"  name="user">';
                            str += '<a href="#" id="btn_user_rel_' + row.Id + '" rel="external nofollow" name="opera" class="easyui-linkbutton" ></a>'
                            return str;
                        }
                    }
                ]],
                fit: true, //页面自适应,
                width: 'auto',
                height: 'auto',
                showFooter: true,
                striped: true, //设置为 true，则把行条纹化。（即奇偶行使用不同背景色）
                cache: false,
                rownumbers: true,//设置为 true，则显示带有行号的列
                singleSelect: true,// 设置为 true，则只允许选中一行。
                checkOnSelect: true, //如果设置为 true，当用户点击某一行时，则会选中/ 取消选中复选框checkbox
                loadMsg: "正在加载数据中...",
                pagination: true,//分页控件
                modal: true,
                pageSize: 5,
                pageList: [5, 10, 20],
                toolbar: '#tb',
                enableEditing: true,
                onDblClickRow: function (index, row) {
                    console.log("点击行事件" + "index:" + index + "row:" + row.RoleName);
                    // dg.datagrid('editRow', index);
                },
                onUnselect: function (index, row) {
                    console.log("取消选中行事件" + "index:" + index + "row:" + row);
                },
                onBeforeSelect: function (index, row) {
                    var btnDom = $('#btn_user_rel_' + row.Id);
                    var comboboxDom = $('#user_rel_' + row.Id);
                    var text = comboboxDom.combobox('getText');
                    var getValues = comboboxDom.combobox('getValues');
                    setRoleobj = {
                        "RoleId": row.Id,
                        "UserId": getValues
                    };
                    console.log(setRoleobj);
                    if (row == null) { return; }

                },
                onLoadSuccess: function (data) {
                    $("a[name ='opera']").linkbutton({
                        text: "关联用户",
                        plain: true,
                        iconCls: "icon-ok",
                        //disabled: true,
                    });

                    $("a[name ='opera']").bind('click', function () {
                        if (setRoleobj == null) 
                        {
                            easyAlert("请选择数据");
                        }
                        $.ajax({
                            type: "Post",
                            url: "/Role/SetRoleAccounts",
                            data: setRoleobj,
                            headers: headers,
                            async: false,
                            success: function (res) {
                                if (res.ResultType == 1) {
                                    easyAlert("关联成功");
                                } else {
                                    easyAlert(res.Message);
                                }
                            }
                        });
                    });


                    $("[name ='user']").combobox({
                        url: '/Role/BriefAccounts',
                        headers: headers,
                        valueField: 'Id',
                        textField: 'AccountName',
                        multiple: true,
                        //multiline: true,
                        panelHeight: 'auto',
                        //readonly: true,
                        onLoadSuccess: function (comData) {
                            $.each(data.rows, function () {
                                var comboboxDom = $('#user_rel_' + this.Id);
                                var conditions = comboboxDom.combobox('getData');//获取所有下拉框数据
                                if (this.RoleBriefAccounts.length > 0) {
                                    comboboxDom.combobox('setValues', this.RoleBriefAccounts);
                                }
                            });

                        },

                    });
                }
            });
            //当分页时运行
            dg.datagrid("getPager").pagination({
                beforePageText: '第',//页数文本框前显示的汉字
                afterPageText: '页    共 {pages} 页',
                displayMsg: '第{from}到{to}条，共{total}条',
            });
        };


        var edit = true;
        //修改数据事件
        $("#edit").bind('click', function () {
            edit = true;
            var row = dg.datagrid('getSelected');
            if (!row) {
                $.messager.alert("提示消息", "请选择要修改的数据");
                return;
            }
            var opts = dlg.dialog('options');
            $('#ID').textbox('setValue', row.Id);
            $('#RoleName').textbox('setValue', row.RoleName);
            $('#RoleCode').textbox('setValue', row.RoleCode);
            dlg.dialog('open').window('center');
        });
        //添加数据事件
        $("#add").bind('click', function () {
            edit = false;
            var title = dlg.dialog();
            var row = dg.datagrid('getSelected');
            $(".from_prizeInfo .easyui-textbox").textbox("clear");
            $(".from_prizeInfo select").combobox("clear");
            dlg.dialog('open').window('center');
        });
        //删除数据事件
        $("#remove").bind('click', function () {
            var row = dg.datagrid("getSelected");
            if (!row) {
                $.messager.alert("提示消息", "请选择要修改的数据");
                return;
            }
            var obj = { "Id": row.Id };
            var row = dg.datagrid('getSelected');
            $.ajax({
                type: "Post",
                url: "/Role/DelSysRole",
                data: obj,
                headers: headers,
                async: false,
                success: function (res) {
                    dialogSuccess(res);
                }
            });
        });
        //刷新
        $("#refresh").bind('click', function () {
            dg.datagrid("reload");
        });
        //查询
        $("#search").click(function () {
            var data = $(".form_elem").serializeArray();
            var obj = {};
            $.each(data, function () {
                obj[this.name] = this.value;
            });
            dg.datagrid("reload", obj);
        });
        //清理
        $("#clear").click(function () {
            $(".form_elem .easyui-textbox").textbox("clear");
            $(".form_elem select").combobox("clear");
            var obj = {};
            dg.datagrid("reload", obj);
        });

        dlg.dialog({
            title: '角色管理',
            width: 400,
            height: 460,
            closed: true,
            cache: false,
            iconCls: 'icon-save',
            modal: true,
            buttons: [{
                text: '提交',
                iconCls: 'icon-ok',
                handler: function () {
                    var url = "";
                    if (edit) {
                        url = "/Role/EditRole";
                    } else {
                        url = "/Role/AddRole";
                    };
                    var data = $(".from_prizeInfo").serializeArray();
                    var obj = {};
                    $.each(data, function () {
                        obj[this.name] = this.value;
                    });
                    $.ajax({
                        type: "Post",
                        url: url,
                        headers: headers,
                        data: obj,
                        async: false,
                        success: function (res) {
                            dialogSuccess(res);
                        }
                    });
                }
            }, {
                text: '取消',
                handler: function () {
                    dlg.dialog('close');
                }
            }]
        });
        //dialog请求结果处理
        function dialogSuccess(data) {
            if (data.ResultType == 1) {
                easyAlert('执行成功');
                dlg.dialog('close');
                dg.datagrid("reload");
            } else {
                easyAlert(res.msg);
            }
        }

        //关联用户信息
        $("#role_user_rel").bind('click', function () {
            var row = dg.datagrid('getSelected');
            if (!row) {
                $.messager.alert("提示消息", "请选择要修改的数据");
                return;
            }
            var comboboxDom = $('#user_rel_' + row.Id);
            var btnDom = $('#btn_user_rel_' + row.Id);

            btnDom.linkbutton({
                disabled: false
            });
            comboboxDom.combobox({
                readonly: false
            });

            var text = comboboxDom.combobox('getText');
            console.log(text);
        });


    </script>
}



<table id="dlg"></table>

<div id="tb" style="padding:5px;height:auto">
    <div style="margin-bottom:5px">
        <a id="refresh" href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh">刷新</a>
        <a id="add" href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
        <a id="edit" href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">编辑</a>
        <a id="remove" href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
        <a id="role_user_rel" href="#" class="easyui-linkbutton" iconCls="icon-tip" plain="true">关联用户</a>
    </div>
    <div>
        <form class="form_elem">
            角色名称: <input name="RoleName" class="easyui-textbox" style="width: 200px; padding-right: 60px">
            角色编码: <input name="RoleCode" class="easyui-textbox" style="width: 200px; padding-right: 60px">
            <button type="button" id="search" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</button>
            <button type="button" id="clear" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">清空</button>
        </form>
    </div>
</div>


@* 操作弹窗 *@
<div id="dlog" class="easyui-dialog" title="Basic Dialog">
    <form class="from_prizeInfo">
        <div style="display:none">
            <input type="text" name="ID" id="ID" class="easyui-textbox" style="width:150px;" />
        </div>
        <div>
            角色名称：
            <input id="RoleName" name="RoleName" class="easyui-textbox" style="width: 200px; padding-right: 60px">
        </div>
        <div>
            角色编码：
            <input id="RoleCode" name="RoleCode" class="easyui-textbox" style="width: 200px; padding-right: 60px">
        </div>
    </form>
</div>